<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style>
       .wrap{
           width: 300px;
           height: 100px;
           background-color: rgb(248, 252, 8);
           font-size: 30px;
           font-weight: 700;
           line-height: 100px;
           text-align: center;
           margin: 200px auto;
           position: relative;
           transition: 2s;
       }
       .top,.bottom{
           position: absolute;
           /* width: 5px; */
           width: 0;
           height: 10px;
           background-color: rgb(56, 13, 252);
           transition: 2s;
       }
       .top{
           top: 0;
           left: 0;
       }
       .bottom{
           bottom: 0;
          right:  0;
       }
       .wrap:hover{
           background-color: rgb(252, 14, 14);
           color: white;
       }
       .wrap:hover .top,.wrap:hover .bottom{
           width: 100%;
       }


    </style>
</head>

<body>
  <div class="wrap">
      <div class="top"></div>
      啊啊啊
      <div class="bottom"></div>
  </div>
</body>

</html>